<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #empDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #empDialog p {
            padding: 10px 0;
        }

        .text {
            max-height: 3.6em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.2em;
        }

        .layui-table-cell {
            display: table-cell !important;
            vertical-align: middle !important;
        }

        .image {
            width: 100px !important;
            height: 80px !important;
            box-shadow: 0 2px 6px gray;
        }


    </style>


</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">新闻信息列表</div>
        <div class="layui-card-body">
            <table id="newslist" lay-filter="newsFilter"></table>
        </div>
    </div>
</div>
<!--歌手详情对话框-->
<div id="empDialog" style="padding:16px;display: none;">
    <table class="layui-table" lay-skin="nob">
        <tr>
            <td rowspan="4"><img id="photourl" src="" alt=""></td>
            <td><span id="empname" class="layui-font-22"></span></td>
        </tr>
        <tr>
            <td colspan="2">
                <span id="details"></span>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="text">
                <span id="empinfo1"></span>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="text">
                <span id="empinfo2"></span>
            </td>
        </tr>
    </table>
    </div>
    <hr>
</div>
<script src="../res/js/config.js"></script>
<script src="../res/layui/layui.js"></script>
<script>
    layui.use(['table', 'jquery', 'layer'], function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        //加载jquery对象
        var $ = layui.jquery;

        //渲染数据表格
        table.render({
            elem: '#emplist',   //需要渲染的数据表格选择器
            url: `http://localhost:80/news/list`,   //服务端数据接口地址
            page: {          //设置分页参数
                limit: 2,    //每页数据条数
                limits: [1, 2, 3, 5], //页码选择列表
                theme: '#1E9FFF' //分页颜色主题
            },
            cols: [[             //配置表头
                {title: '编号', field: 'empnum'},
                {
                    title: '图片',
                    field: 'photourl',
                    templet: '<div><img class="image" src="{{d.photourl}}" alt="{{d.photourl}}"></div>'
                },
                {title: '姓名', field: 'empname'},
                {
                    title: '性别', field: 'gender', templet: function (d) {
                        return d.gender === 1 ? '<i class="layui-icon layui-icon-male layui-bg-blue"></i>' : '<i class="layui-icon layui-icon-female layui-bg-red"></i>'
                    }
                },
                {title: '手机号码', field: 'phonenumber'},
               // {title: '工资', field: 'salary'},
                {title: '职位', templet: '<div>{{d.job.jobname}}</div>'},
                {title: '所属部门', templet: '<div>{{d.dept.deptname}}</div>'},
                // {
                //     title: '生日',
                //     field: 'birthdate',
                //     templet: '<div>{{layui.util.toDateString(d.birthdate,"yyyy-MM-dd")}}</div>'
                // },
                // {
                //     title: '入职时间',
                //     field: 'hiredate',
                //     templet: '<div>{{layui.util.toDateString(d.hiredate,"yyyy-MM-dd")}}</div>'
                // },
                {title: '操作', width: 160, templet: '#rowTools'}
            ]]
        })

        //为表格行工具绑定事件
        table.on('tool(empFilter)', function (obj) {
            //获取事件名（lay-event属性值）
            let layEvent = obj.event;
            //获取当前正在操作的数据行
            let data = obj.data;

            switch (layEvent) {
                case 'details':
                    //显示弹出层
                    layer.open({
                        type: 1,     //设置弹层类型 1：页面层
                        content: $('#empDialog'),  // 使用dom节点作为弹层内容
                        area: '850px',
                        closeBtn: 1,
                        shadeClose: true,   //点击遮罩时关闭弹层
                        btn: ['确定'], //显示按钮
                        yes: function () { //按钮点击之后的回调
                            //关闭所有层
                            layer.closeAll();
                        },
                        success: function (layero, index) {  //当弹出层成功显示之后回调
                            var mask = $(".layui-layer-shade");
                            mask.appendTo(layero.parent());   //其中：layero是弹层的DOM对象
                            //将指定区域的用户信息获取并填充
                            layero.find('#photourl').prop('src', data.photourl);
                            layero.find('#empname').text(data.newsname);
                            layero.find('#details').text(`手机:${data.phonenumber},性别:${data.gender}`)
                            layero.find('#empinfo1').text(`所属部门:${data.dept.deptname},职位:${data.job.jobname}`)
                            layero.find('#empinfo2').text(`生日:${data.birthdate},入职时间:${data.hiredate}`)
                        }
                    })
                    break;
                case 'updateStatus':
                    //显示确认框
                    layer.confirm('确认修改吗?', {icon: 3}, function () {
                        //对状态取反
                        data.status = data.status === 0 ? 1 : 0;
                        //显示加载层
                        let index = layer.load(1);
                        //调用后台接口完成更新
                        $.post(`${baseURL}/emp/modifyStatus`, data, function (resp) {
                            //关闭加载层
                            layer.close(index);
                            if (resp.code === 0) {
                                layer.msg(resp.msg, function () {
                                    //更新表格
                                    table.reload('userlist');
                                });
                            } else {
                                layer.msg(resp.msg);
                            }
                        })
                    })
                    break;
            }
        })
    })
</script>


<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-more"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            修改
        </button>
    </div>
</script>


</body>
</html>